import { Input, Button, Form, Card, Space, message } from 'antd'
import 'moment/locale/zh-cn'
import { observer } from 'mobx-react-lite'
import {useStore} from '@/store'
import {useNavigate} from 'react-router-dom'


const ModifyPasswordLayout = () => {
  const {modifyStore} = useStore()
  const navigate = useNavigate()

  const onFinish = async(values) => {
    const {old_password, password} = values
    const res = await modifyStore.login({ old_password, password })
    if(res.return_code === "0000"){
      message.loading('修改成功！');
      navigate("/login", {replace: true})    
    }else{
      message.error(res.return_msg);
    }
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
       <div>
        <Card>
            <Form
               labelCol={{ span: 4 }}
               wrapperCol={{ span: 16 }}
               initialValues={{ type: 1, content: '' }}
               onFinish={onFinish}
               onFinishFailed={onFinishFailed}
            >
            <Form.Item name="old_password" 
                        label="旧密码"
                        rules={[{required: true, message: '请输入旧密码!',},]}
                        hasFeedback>
                  <Input.Password  style={{width:300}}/>
              </Form.Item>
              <Form.Item name="password" 
                        label="密码"
                        rules={[{required: true, message: '请输入密码!',},]}
                        hasFeedback>
                  <Input.Password  style={{width:300}}/>
              </Form.Item>
              <Form.Item name="confirm"
                        label="确认密码"
                        dependencies={['password']}
                        hasFeedback
                        rules={[
                            {
                              required: true, 
                              message: '请输入确认密码!',
                          },
                            ({ getFieldValue }) => ({
                              validator(_, value) {
                                if (!value || getFieldValue('password') === value) {
                                  return Promise.resolve();
                                }

                                return Promise.reject(new Error('两次输入的密码不一致!'));
                              },
                            }),
                          ]}
                        >
                        <Input.Password style={{width:300}}/>
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 4 }}>
                        <Space>
                        <Button size="middle" type="primary" htmlType="submit">保存</Button>
                        </Space>
                </Form.Item>
            </Form>
        </Card>
    </div>
  )
}

export default observer(ModifyPasswordLayout)